// page-header.js
Component({
  properties: {
    // 页面标题
    title: {
      type: String,
      value: ''
    },
    // 页面副标题
    subtitle: {
      type: String,
      value: ''
    },
    // 最大滚动距离，用于计算透明度和缩放
    maxScrollDistance: {
      type: Number,
      value: 200
    },
    // 最小缩放比例
    minScale: {
      type: Number,
      value: 0.8
    }
  },

  data: {
    // 组件内部状态
    opacity: 1,        // 透明度
    scale: 1,          // 缩放比例
    lastScrollTop: 0,  // 上次滚动位置
    headerHeight: 0,   // 组件高度
    animationFrame: null // 动画帧ID
  },

  lifetimes: {
    attached() {
      // 初始化透明度状态
      this.setData({ opacity: 1, scale: 1 });
      
      // 获取组件高度
      this.getHeaderHeight();
      
      // 设置滚动监听
      this.setupScrollListeners();
    },
    detached() {
      // 清理事件监听和动画帧
      const pages = getCurrentPages();
      const currentPage = pages[pages.length - 1];
      if (currentPage && currentPage.__pageHeaderScrollHandler) {
        currentPage.onPageScroll = currentPage.__originalPageScrollHandler;
        delete currentPage.__pageHeaderScrollHandler;
        delete currentPage.__originalPageScrollHandler;
      }
      
      if (this.data.animationFrame) {
        clearTimeout(this.data.animationFrame);
      }
    }
  },

  methods: {
    // 获取组件高度
    getHeaderHeight() {
      const query = wx.createSelectorQuery().in(this);
      query.select('.page-header').boundingClientRect((rect) => {
        if (rect) {
          this.setData({
            headerHeight: rect.height
          });
        }
      }).exec();
    },

    // 设置滚动监听
    setupScrollListeners() {
      // 获取当前页面
      const pages = getCurrentPages();
      const currentPage = pages[pages.length - 1];
      
      if (currentPage) {
        // 保存原始的页面滚动处理函数
        currentPage.__originalPageScrollHandler = currentPage.onPageScroll;
        
        // 设置新的滚动处理函数
        currentPage.__pageHeaderScrollHandler = this.handlePageScroll.bind(this);
        
        // 覆盖页面的onPageScroll方法
        currentPage.onPageScroll = (e) => {
          // 调用我们的滚动处理函数
          currentPage.__pageHeaderScrollHandler(e);
          
          // 如果原始滚动处理函数存在，也调用它
          if (typeof currentPage.__originalPageScrollHandler === 'function') {
            currentPage.__originalPageScrollHandler(e);
          }
        };
      }
    },

    // 页面滚动处理函数
    handlePageScroll(e) {
      const scrollTop = e.scrollTop;
      
      // 使用setTimeout优化性能，替代requestAnimationFrame
      if (this.data.animationFrame) {
        clearTimeout(this.data.animationFrame);
      }
      
      this.data.animationFrame = setTimeout(() => {
        this.updateVisualEffects(scrollTop);
      }, 16); // 约60fps
    },

    // 更新视觉效果（透明度和缩放）
    updateVisualEffects(scrollTop) {
      const { maxScrollDistance, minScale } = this.properties;
      const lastScrollTop = this.data.lastScrollTop;
      
      // 计算滚动方向
      const isScrollingDown = scrollTop > lastScrollTop;
      
      // 更新上次滚动位置
      this.setData({ lastScrollTop: scrollTop });
      
      // 基于滚动距离计算透明度和缩放比例
      let newOpacity = 1;
      let newScale = 1;
      
      if (isScrollingDown) {
        // 向下滚动时：逐渐变透明并缩小
        const scrollRatio = Math.min(scrollTop / maxScrollDistance, 1);
        newOpacity = 1 - scrollRatio;
        newScale = 1 - (1 - minScale) * scrollRatio;
      } else {
        // 向上滚动时：恢复不透明并放大回原尺寸
        // 当滚动到顶部附近时，直接恢复完全显示
        if (scrollTop <= 50) {
          newOpacity = 1;
          newScale = 1;
        } else {
          // 否则根据距离顶部的距离进行恢复
          const distanceFromTop = Math.min(scrollTop, maxScrollDistance);
          const scrollRatio = 1 - (distanceFromTop / maxScrollDistance);
          newOpacity = Math.min(1, scrollRatio * 2); // 快速恢复透明度
          newScale = minScale + (1 - minScale) * Math.min(1, scrollRatio * 1.5); // 快速恢复缩放
        }
      }
      
      // 限制透明度和缩放比例的范围
      newOpacity = Math.max(0, Math.min(1, newOpacity));
      newScale = Math.max(minScale, Math.min(1, newScale));
      
      // 更新数据
      this.setData({
        opacity: newOpacity,
        scale: newScale
      });
    }
  }
})
